$borders_color: transparentize($fg_color, $border_opacity);
$outer_borders_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
-// buttons in notifications
-$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
-
// osd colors
$osd_borders_color: transparentize($osd_fg_color, 0.9);
$osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
// active state
$active_bg_color: if($variant=='light', darken($bg_color, 11%), lighten($bg_color, 12%));
$active_fg_color: if($variant=='light', darken($fg_color, 11%), lighten($fg_color, 12%));
+
+// selection colors
+$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), lighten($selected_bg_color, 15%));
\ No newline at end of file
/* Global Values */
-// Base values of elemetns of the shell in their smallest "unit".
+// Base values of elements of the shell in their smallest "unit".
// These are used in calculations elsewhere to have elements in proportion
$base_font_size: 11pt; // font size
$base_padding: 6px; // internal padding of elements
$medium_scalable_icon_size: $scalable_icon_size * 1.5;
$large_scalable_icon_size: $scalable_icon_size * 2;
+// animation definition
+$ease_out_quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
// Stage
stage {
border-radius: $base_border_radius * 2;
padding: $base_padding;
spacing: $base_padding;
- border-width: 2px;
- border-style: solid;
- border-color:transparent;
- transition-duration: 200ms;
text-align: center;
- color: inherit;
-
- @if $contrast == 'high' {
- border-color: $hc_inset_color;
- }
+ transition-duration: 100ms;
}
// common button styling
%button_common {
border-radius: $base_border_radius;
- border-style: solid;
- border-width: 1px;
- font-weight: bold;
padding: $base_padding * .5 $base_padding * 4;
- transition-duration: 100ms;
+ font-weight: bold;
+ transition: border-width 300ms $ease_out_quad,
+ box-shadow 300ms $ease_out_quad;
}
%button {
&:selected,
&:active { @include button(active);}
&:checked { @include button(checked);}
- &.default { @include button(default);}
-
- &.flat {
- @include button(normal, $flat:true);
- &:focus { @include button(focus, $flat:true);}
- &:hover { @include button(hover, $flat:true);}
- &:insensitive { @include button(insensitive, $flat:true);}
- &:selected,
- &:active { @include button(active, $flat:true);}
- &:checked { @include button(checked, $flat:true);}
- &.default { @include button(default, $flat:false);}
- }
+}
+
+%flat_button {
+ @include button(normal, $style: flat);
+ &:focus { @include button(focus, $style: flat);}
+ &:hover { @include button(hover, $style: flat);}
+ &:insensitive { @include button(insensitive, $style: flat);}
+ &:selected,
+ &:active { @include button(active, $style: flat);}
+ &:checked { @include button(checked, $style: flat);}
+}
+
+%default_button {
+ @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);
+ &:focus { @include button(focus, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
+ &:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
+ &:insensitive { @include button(insensitive, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
+ &:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
+}
+
+// items in popover menus
+%menuitem {
+ font-weight: normal;
+ spacing: $base_padding;
+ transition-duration: 100ms;
+ padding: $base_padding * 1.5 $base_padding * 2;
}
// common style for card elements
-%card {
+%card_common {
border-radius: $base_border_radius * 1.5;
padding: $scaled_padding * 2;
margin: $base_margin;
box-shadow: 0 1px 2px 0 $card_shadow_color;
// bit of a hack here with border since we can't have double box-shadow
border: 1px solid $card_shadow_border_color;
+
+ @if $contrast == 'high' {
+ border-color: transparent;
+ box-shadow: none;
+ }
+}
+
+%card {
+ @extend %card_common;
+ @include button(normal, $style: card);
+ &:hover { @include button(hover, $style: card);}
+ &:active { @include button(active, $style: card);}
+ &:focus { @include button(focus, $style: card);}
+ &:insensitive { @include button(insensitive, $style: card);}
+}
+
+%card_flat {
+ @extend %card_common;
+ @include button(undecorated, $style: flat);
+ &:hover { @include button(hover, $style: flat);}
+ &:active { @include button(active, $style: flat);}
+ &:focus { @include button(focus, $style: card);}
+ &:insensitive { @include button(insensitive, $style: card);}
}
%entry {
@extend %entry_common;
- @include entry(normal, $c:$fg_color);
- &:hover { @include entry(hover, $c:$fg_color);}
- &:focus { @include entry(focus, $c:$fg_color);}
- &:insensitive { @include entry(insensitive, $c:$fg_color);}
+ @include entry(normal);
+ &:hover { @include entry(hover);}
+ &:focus { @include entry(focus);}
+ &:insensitive { @include entry(insensitive);}
StLabel.hint-text {
color: transparentize($fg_color, 0.3);
padding: $base_padding * 2;
font-weight: bold !important;
- &:ltr {margin-right: 1px;}
- &:rtl {margin-left: 1px;}
+ // needs a 1px adjustment to fit exactly into the outer radius
+ $bubble_button_radius: $modal_radius - 1px;
- @include button(normal, $c:$bubble_buttons_color);
- &:insensitive { @include button(insensitive, $c:$bubble_buttons_color);}
- &:focus { @include button(focus, $c:$bubble_buttons_color);}
- &:hover { @include button(hover, $c:$bubble_buttons_color);}
- &:active { @include button(active, $c:$bubble_buttons_color);}
- &:checked { @include button(checked, $c:$bubble_buttons_color);}
+ @include button(normal, $style: bubble);
+ &:focus { @include button(focus, $style: bubble);}
+ &:hover { @include button(hover, $style: bubble);}
+ &:active { @include button(active, $style: bubble);}
+ &:checked { @include button(checked, $style: bubble);}
+ &:insensitive { @include button(insensitive, $style: bubble);}
&:first-child:ltr {
- border-radius: 0 0 0 $modal_radius;
+ border-radius: 0 0 0 $bubble_button_radius;
}
&:last-child:ltr {
- border-radius: 0 0 $modal_radius;
+ border-radius: 0 0 $bubble_button_radius;
margin-right: 0 !important;
}
&:first-child:rtl {
- border-radius: 0 0 $modal_radius;
+ border-radius: 0 0 $bubble_button_radius;
}
&:last-child:rtl {
- border-radius: 0 0 0 $modal_radius;
+ border-radius: 0 0 0 $bubble_button_radius;
margin-left: 0 !important;
}
&:first-child:last-child {
- border-radius: 0 0 $modal_radius $modal_radius;
+ border-radius: 0 0 $bubble_button_radius $bubble_button_radius;
margin-left: 0 !important;
margin-right: 0 !important;
}
border: 1px solid $osd_outer_borders_color;
border-radius: $forced_circular_radius;
padding: $base_padding * 2;
- border: 2px solid transparent;
-
@if $contrast == 'high' {
- border-color: $hc_inset_color;
+ @include draw_hc_inset($width: 2px,$border: true);
}
}
// entries
%osd_entry {
@extend %entry_common;
- @include entry(normal, $c:$osd_fg_color,);
- &:hover { @include entry(hover, $c:$osd_fg_color);}
- &:focus { @include entry(focus, $c:$osd_fg_color);}
- &:insensitive { @include entry(insensitive, $c:$osd_fg_color);}
+ @include entry(normal, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);
+ &:hover { @include entry(hover, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);}
+ &:focus { @include entry(focus, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);}
+ &:insensitive { @include entry(insensitive, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);}
StLabel.hint-text {color: transparentize($osd_fg_color, 0.3); }
}
// buttons on OSD elements
%osd_button {
@extend %button_common;
- @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);
- &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
- &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
- &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
- &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
- &:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
+ @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color);
+ &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color);}
+ &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color);}
+ &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color);}
+ &:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);}
+ &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color);}
}
%osd_button_flat {
- @extend %osd_button;
- @include button(undecorated, $osd:true);
- &:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
+ @extend %button_common;
+ @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);
+ &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
+ &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
+ &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
+ &:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
+ &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
}
/* System Elements */
// entries
%system_entry {
@extend %entry_common;
- @include entry(normal, $c:$system_fg_color,);
- &:hover { @include entry(hover, $c:$system_fg_color);}
- &:focus { @include entry(focus, $c:$system_fg_color, $fc:$selected_bg_color);}
- &:insensitive { @include entry(insensitive, $c:$system_fg_color);}
+ @include entry(normal, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);
+ &:hover { @include entry(hover, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);}
+ &:focus { @include entry(focus, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);}
+ &:insensitive { @include entry(insensitive, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);}
StLabel.hint-text { color: transparentize($system_fg_color, 0.3);}
}
-
// buttons
%system_button {
@include button(normal, $tc:$system_fg_color, $c:$system_bg_color);
&:focus { @include button(focus, $tc:$system_fg_color, $c:$system_bg_color);}
&:hover { @include button(hover, $tc:$system_fg_color, $c:$system_bg_color);}
&:active { @include button(active, $tc:$system_fg_color, $c:$system_bg_color);}
- &:outlined,&:checked { @include button(checked, $tc:$system_fg_color, $c:$system_bg_color);}
+ &:checked { @include button(checked, $tc:$system_fg_color, $c:$system_bg_color);}
}
$error_color: $error_bg_color;
// colors for selected or default elements
-$selected_bg_color: if($variant == 'light', $blue_3, $blue_4);
+$selected_bg_color: if($variant == 'light', $blue_4, $blue_3);
$selected_fg_color: $light_1;
-$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 20%));
// link colors
-$link_color: if($variant == 'light', $blue_3, $blue_4);
+$link_color: if($variant == 'light', $blue_4, $blue_2);
$link_visited_color: transparentize($link_color, .6);
// special cased widget definitions
-$button_mix_factor: if($variant == 'light', 12%, 9%);
-$border_opacity: if($variant == 'light', .85, .9);
+$background_mix_factor: if($variant == 'light', 12%, 9%); // used to boost the color of backgrounds in different variants
+$border_opacity: if($variant == 'light', .85, .9); // change the border opacity in different variants
// shadows
$shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2));
$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
+// focus colors
+$focus_color: $selected_bg_color;
+$focus_border_color: transparentize($focus_color, 0.5);
+
// High Contrast overrides
@if $contrast == 'high' {
// increase border opacity
$border_opacity: .5;
- // increase the button mix factor
- $button_mix_factor: 20%;
// remove shadows
$shadow_color: transparent;
$text_shadow_color: transparent;
+ // less transparent focus color
+ $focus_border_color: transparentize($focus_color, 0.2);
}
-// Drawing mixins
+//
+// Drawing functions
+//
// Function to convert px values to em
@function to_em($input, $base: 16px) {
@return mix($c, $mc, $mf);
}
-// Mixin to convert provided font size in pt to em units
-@mixin fontsize($size, $base: 16px, $unit: pt) {
- // if pt, convert into unitless value with the assumption: 1pt = 1.091px
- $adjusted_size: if($unit == pt, $size * 1.091, $size) * 1000;
- $rounded_size: round($adjusted_size / $base) / 1000;
- font-size: $rounded_size * 1em;
- // font-size: round($size) + pt;
+// Function to mix the color and make the focus background
+@function focus_bg_color($bg, $fc:$focus_color) {
+ @return mix($fc, $bg, 5%);
}
-// Text entries
-@mixin entry($t, $c, $fc:$selected_bg_color) {
//
-// Entries drawing function
-//
-// $t: entry type
-// $c: text color, used to derive background color of entries
-//
-// possible $t values: normal, focus, insensitive
+// Drawing mixins
//
- transition-duration: 100ms;
-
- @if $t==normal {
- background-color: transparentize($c, 0.85);
- color: transparentize($c,0.3);
- @if $contrast == 'high' {
- box-shadow: inset 0 0 0 1px $hc_inset_color;
- }
- }
-
- @if $t==focus {
- background-color: mix(transparentize($c, 0.75), $fc, 95%);
- box-shadow: inset 0 0 0 2px transparentize($fc, 0.3);
- color: $c;
- &:hover {}
+// Draw the inset for High Contrast elements
+@mixin draw_hc_inset($width: 1px, $fc: $hc_inset_color, $border: false) {
+ box-shadow: inset 0 0 0 $width $fc;
+ @if $border {
+ border: $width solid $fc;
+ box-shadow: none;
}
+}
- @if $t==hover {
- background-color: transparentize($c, 0.75);
+// Draw the focus ring
+@mixin focus_ring($width: 2px, $fc: $focus_border_color, $border: false) {
+ box-shadow: inset 0 0 0 $width $fc !important;
+ @if $border {
+ border:$width solid $fc !important;
+ box-shadow: none;
}
+}
- @if $t==insensitive {
- background-color:transparentize($c, 0.75);
- color: transparentize($c, 0.5);
- }
+// Mixin to convert provided font size in pt to em units
+@mixin fontsize($size, $base: 16px, $unit: pt) {
+ // if pt, convert into unitless value with the assumption: 1pt = 1.091px
+ $adjusted_size: if($unit == pt, $size * 1.091, $size) * 1000;
+ $rounded_size: round($adjusted_size / $base) / 1000;
+ font-size: $rounded_size * 1em;
+ // font-size: round($size) + pt;
}
-// On-screen Keyboard
-@mixin keyboard_key($t, $c:$osd_bg_color, $tc:$osd_fg_color) {
-//
-// Keyboard key drawing function
-//
-// $t: key type,
-// $c: base key color for colored* types
-// $tc: optional text color for colored* types
-//
-// possible $t values:
-// normal, hover, active, checked, insensitive, undecorated
-//
+// Text entries drawing function
+@mixin entry($type, $c:$fg_color, $bc:$bg_color, $always_dark: false) {
+ //
+ // $type: entry type, possible values: normal, focus, hover, insensitive
+ // $c: text color
+ // $bc: background color
+ // $always_dark: override the light theme check to use dark colors, true or false
+ //
- // normal key
- @if $t==normal {
- color: $tc;
- background-color: lighten($c, 3%);
- }
+ // background color
+ $entry_bg_color: mix($c, $bc, $background_mix_factor);
- // focused key
- @if $t==focus {
- color: $tc;
- background-color: mix(lighten($c, 3%), $selected_bg_color, 90%);
- box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
- &:hover {
- background-color: mix(lighten($c, 8%), $selected_bg_color, 90%);
- box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
- }
- &:active {
- background-color: mix(lighten($c, 10%), $selected_bg_color, 90%);
- box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
- }
+ // background color adjustment factors
+ // the % a color is lightened or darkened for button states
+ $hover_factor: 4%;
+ $insensitive_factor: 3%;
+
+ // entry state background colors
+ $hover_entry_bg_color: if($variant == 'light', darken($entry_bg_color, $hover_factor), lighten($entry_bg_color, $hover_factor));
+ $insensitive_entry_bg_color: if($variant == 'light', lighten($entry_bg_color, $insensitive_factor), darken($entry_bg_color, $insensitive_factor));
+
+ // override entry background colours if element is always dark
+ @if $always_dark {
+ $hover_entry_bg_color: lighten($entry_bg_color, $hover_factor);
+ $insensitive_entry_bg_color: darken($entry_bg_color, $insensitive_factor);
}
- // hover key
- @else if $t==hover {
- color: $tc;
- background-color: lighten($c, 7%);
+ @if $contrast == 'high' {
+ @include draw_hc_inset();
}
- // active key
- @else if $t==active {
- color: $tc;
- background-color: lighten($c, 10%);
+ // normal
+ @if $type == 'normal' {
+ background-color: $entry_bg_color;
+ color: transparentize($c,0.3);
}
- // checked key
- @else if $t==checked {
- color: $tc;
- background-color: lighten($c, 15%);
+ // focus styles
+ @if $type == 'focus' {
+ @include focus_ring();
+ background-color: focus_bg_color($entry_bg_color);
+ color: $c;
}
- // insensitive key
- @else if $t==insensitive {
- color: $insensitive_fg_color;
- background-color: $insensitive_bg_color;
+ // hover styles
+ @if $type == 'hover' {
+ background-color: $hover_entry_bg_color;
+ color: $c;
}
- // reset
- @else if $t==undecorated {
- background-color: transparent;
- background-image: none;
+ // insensitive styles
+ @if $type == 'insensitive' {
+ background-color: $insensitive_entry_bg_color;
+ color: transparentize($c, 0.5);
}
}
-//
-// Button drawing function
-//
-// $t: button type
-//
-// possible $t values:
-// normal, focus, hover, active, checked, insensitive, default, undecorated,
-//
-// $c: button bg color, derived from bg_color
-// $tc: button text color, derived from fg_color
-//
-// $flat: button has no styling
-// $osd: button uses OSD styling
-// $card: button uses card styling
-//
-
-@mixin button($t, $tc:$fg_color, $c:$bg_color, $flat: false, $osd: false, $card: false){
- // background color
- $button_bg_color: mix($tc, $c, $button_mix_factor);
+// Button drawing function
+@mixin button($type, $tc:$fg_color, $c:$bg_color, $style: null, $always_dark: false) {
+ //
+ // $type: button type, possible values:
+ // - normal, focus, hover, active, checked, insensitive, default, undecorated
+ // $c: button bg color, derived from bg_color
+ // $tc: button text color, derived from fg_color
+ // $style: button style, possible values: card, bubble, flat, default
+ // $always_dark: override the light theme check to use dark colors, true or false
+ //
- // background color override for OSD elements
- @if $osd {
- $button_bg_color: transparentize($tc, 0.9);
- }
+ // mix input colors to get button background color
+ $button_bg_color: mix($tc, $c, $background_mix_factor);
// background color override for card elements
- @if $card {
- $button_bg_color: $card_bg_color;
+ @if $style == 'card' { $button_bg_color: $card_bg_color;}
+ // background color override for buttons in notifications
+ @if $style == 'bubble' { $button_bg_color: if($variant == 'light', darken($button_bg_color, 3%), lighten($button_bg_color, 10%));}
+ // background color mix override for flat style; the button bg color is the background color input
+ @if $style == 'flat' { $button_bg_color: $c;}
+ // background color mix override for default button style
+ @if $style == 'default' { $button_bg_color: $c;}
+
+ // background color adjustment factors
+ // the % a color is lightened or darkened for button states
+ $hover_factor: 4%;
+ $active_factor: 9%;
+ $checked_factor: 8%;
+ $insensitive_factor: 3%;
+
+ // flat style overrides
+ @if $style == 'flat' {
+ $hover_factor: 7%; // stronger factor in flat style
+ }
+
+ // button state background colors
+ $hover_button_bg_color: if($variant == 'light', darken($button_bg_color, $hover_factor), lighten($button_bg_color, $hover_factor));
+ $active_button_bg_color: if($variant == 'light', darken($button_bg_color, $active_factor), lighten($button_bg_color, $active_factor));
+ $checked_button_bg_color: if($variant == 'light', darken($button_bg_color, $checked_factor), lighten($button_bg_color, $checked_factor));
+ $insensitive_button_bg_color: if($variant == 'light', lighten($button_bg_color, $insensitive_factor), darken($button_bg_color, $insensitive_factor));
+
+ // override button background colours if element is always dark
+ @if $always_dark {
+ $hover_button_bg_color: lighten($button_bg_color, $hover_factor);
+ $active_button_bg_color: lighten($button_bg_color, $active_factor);
+ $checked_button_bg_color: lighten($button_bg_color, $checked_factor);
+ $insensitive_button_bg_color: darken($button_bg_color, $insensitive_factor);
+ }
+
+ // flat style overrides
+ @if $style == 'flat' {
+ $insensitive_button_bg_color: $button_bg_color;
+ }
+
+ // high contrast overrides
+ @if $contrast == 'high' {
+ // override button background colors for high contrast
+ $button_bg_color: hc_color_mix($button_bg_color);
+ $hover_button_bg_color: hc_color_mix($hover_button_bg_color);
+ $active_button_bg_color: hc_color_mix($active_button_bg_color);
+ $checked_button_bg_color: hc_color_mix($checked_button_bg_color);
- @if $contrast == 'high' {
- $button_bg_color: hc_color_mix($card_bg_color);
- }
- }
+ // also draw the inset border
+ @include draw_hc_inset();
- // normal button
- @if $t==normal {
- color: $tc;
- background-color: $button_bg_color;
- @if $flat {
- background-color: transparent;
+ // duplicate flat bg color for High Contrast
+ @if $style == 'flat' {
+ $button_bg_color: $c;
}
- @if $contrast == 'high' {
- box-shadow: inset 0 0 0 1px $hc_inset_color;
+
+ @if $style == 'default' {
+ @include draw_hc_inset($width:0px);
}
}
- // focused button
- @if $t==focus {
- $focus_bg_color: mix($button_bg_color, $selected_bg_color, 90%);
+ // normal style
+ @if $type == 'normal' {
color: $tc;
- background-color: $focus_bg_color;
- box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4) !important;
-
- &:hover {
- background-color: if($variant == 'light', darken($focus_bg_color, 3%), lighten($focus_bg_color, 3%));
- box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
- }
- &:active {
- background-color: if($variant == 'light', darken($focus_bg_color, 6%), lighten($focus_bg_color, 6%));
- box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
- }
-
- // card style
- @if $card {
- border-color: transparent;
- }
+ background-color: $button_bg_color;
}
// hover button
- @else if $t==hover {
- $hover_bg_color: if($variant == 'light', darken($button_bg_color, 3%), lighten($button_bg_color, 3%));
+ @else if $type == 'hover' {
color: $tc;
- background-color: $hover_bg_color;
-
- @if $contrast == 'high' {
- background-color: hc_color_mix($hover_bg_color);
- }
-
- // card style
- @if $card {
- $card_hover_bg_color: mix($tc, $card_bg_color, 4%);
- background-color: $card_hover_bg_color;
-
- @if $contrast == 'high' {
- background-color: hc_color_mix($card_hover_bg_color);
- }
- }
+ background-color: $hover_button_bg_color;
}
// active button
- @else if $t==active {
- $active_bg_color: if($variant == 'light', darken($button_bg_color, 6%), lighten($button_bg_color, 6%));
+ @else if $type == 'active' {
color: $tc;
- background-color: $active_bg_color;
-
- @if $contrast == 'high' {
- background-color: hc_color_mix($active_bg_color);
- }
-
- // card style
- @if $card {
- $card_active_bg_color: mix($tc, $card_bg_color, 7%);
- background-color: $card_active_bg_color;
-
- @if $contrast == 'high' {
- background-color: hc_color_mix($card_active_bg_color);
- }
+ background-color: $active_button_bg_color;
+ &:hover { background-color: if($variant == 'light', darken($active_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));}
+ &:focus {
+ // otherwise use focus bg color mixin
+ $bg: focus_bg_color($active_button_bg_color);
+ background-color: $bg;
}
}
// checked button
- @else if $t==checked {
- $checked_bg_color:if($variant == 'light', darken($button_bg_color, 9%), lighten($button_bg_color, 9%));
+ @else if $type == 'checked' {
color: $tc;
- background-color: $checked_bg_color;
-
- &:hover { background-color: lighten($checked_bg_color, 12%);}
- &:active { background-color: lighten($checked_bg_color, 15%);}
-
- @if $contrast == 'high' {
- background-color: hc_color_mix($checked_bg_color);
- &:hover { background-color: hc_color_mix(lighten($checked_bg_color, 12%));}
- &:active { background-color: hc_color_mix(lighten($checked_bg_color, 15%));}
- }
+ background-color: $checked_button_bg_color;
+ &:hover { background-color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));}
+ &:active { background-color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($active_button_bg_color, $active_factor));}
}
// insensitive button
- @else if $t==insensitive {
- color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
- background-color: if($variant == 'light', transparentize($button_bg_color, .9), transparentize($button_bg_color, .95));
+ @else if $type == 'insensitive' {
+ $insensitive_button_fg_color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
+ color: $insensitive_button_fg_color;
+ background-color: $insensitive_button_bg_color;
+ &:hover { background-color: if($variant == 'light', darken($insensitive_button_bg_color, $hover_factor), lighten($insensitive_button_bg_color, $hover_factor));}
+ // no outline in High Contrast for insensitive buttons
@if $contrast == 'high' {
- // no border since it isn't sensitive
- box-shadow: none;
+ @include draw_hc_inset($fc:transparent);
}
}
- // default/suggested button
- @else if $t==default {
- background-color: $selected_bg_color;
- color: $selected_fg_color;
+ // focused button
+ @else if $type == 'focus' {
+ color: $tc;
+ @include focus_ring();
- &:focus {
- box-shadow: inset 0 0 0 2px transparentize($selected_fg_color, .4) !important;
+ // use a different focus ring color for default style
+ @if $style == 'default' {
+ @include focus_ring($fc:$selected_borders_color);
}
- &:hover, &:focus {
- background-color: lighten($selected_bg_color, 5%);
- color: lighten($selected_fg_color, 5%);
+ // change background color if style is flat
+ @if $style == 'flat' {
+ $button_bg_color: transparentize($button_bg_color, 0.75);
}
- &:active {
- background-color: darken($selected_bg_color, 7%);
- color: darken($selected_fg_color, 7%);
- }
- &:insensitive {
- @include button(insensitive);
- background-color: transparentize($selected_bg_color, .5);
- color: transparentize($selected_fg_color, .5);
+
+ background-color: focus_bg_color($button_bg_color);
+
+ &:hover {
+ background-color: focus_bg_color($hover_button_bg_color);
}
}
// reset (unstyled button)
- @else if $t==undecorated {
+ @else if $type == 'undecorated' {
background-color: transparent;
border-color: transparent;
box-shadow: none;
&:insensitive {
- @include button(insensitive);
background-color: transparent !important;
}
}
}
// Helper mixin for button-like elements with an icon
-@mixin tile_button($color, $flat: true) {
- @extend %tile;
- color: $color;
+@mixin tile_button($fg:$system_fg_color, $bg:$system_bg_color, $raised: false, $system: true) {
+ //
+ // $fg: foreground color
+ // $bg: background color
+ //
+ // $raised: uses raised style, true or false
+ // $system: uses system styles, true or false
+ //
- // focus-color
- $fc: mix($selected_bg_color, $color, 90%);
- @if $flat {
- background-color: transparent;
- &:hover { background-color: transparentize($color, .88);}
- &:highlighted, &:focus {
- background-color: transparentize($fc, .84);
- &:hover {
- background-color: transparentize($fc, .68);
- }
- }
+ @extend %tile;
+
+ @if $raised {
+ @include button(normal, $tc:$fg, $c:$bg, $always_dark: $system);
+ &:focus { @include button(focus, $tc:$fg, $c:$bg, $always_dark: $system);}
+ &:hover { @include button(hover, $tc:$fg, $c:$bg, $always_dark: $system);}
+ &:active { @include button(active, $tc:$fg, $c:$bg, $always_dark: $system);}
+ &:selected,
+ &:checked { @include button(checked, $tc:$fg, $c:$bg, $always_dark: $system);}
+ &:insensitive { @include button(insensitive, $tc:$fg, $c:$bg, $always_dark: $system);}
} @else {
- background-color: transparentize($color, .84);
- &:hover { background-color: transparentize($color, .72);}
- &:highlighted, &:focus {
- background-color: transparentize(mix($fc, $color, 20%), .84);
- &:hover {
- background-color: transparentize(mix($fc, $color, 20%), .68);
- }
- }
+ @include button(normal, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);
+ &:focus { @include button(focus, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
+ &:hover { @include button(hover, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
+ &:active { @include button(active, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
+ &:selected,
+ &:checked { @include button(checked, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
+ &:insensitive { @include button(insensitive, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);}
}
- // bit of a hack to have nice high contrast
@if $contrast == 'high' {
- @if $flat {
- &:hover {
- box-shadow: inset 999px 0 0 0 transparentize($color, .92);
- }
- &:highlighted, &:focus {
- box-shadow: inset 999px 0 0 0 transparentize($fc, .8);
- }
- } @else {
- box-shadow: inset 999px 0 0 0 transparentize($color, .92);
- border-color: transparentize($color, .44);
- &:highlighted, &:focus {
- box-shadow: inset 999px 0 0 0 transparentize($fc, .8);
- }
- }
- }
-
- &:highlighted, &:focus {
- border-color: transparentize($fc, .3);
- }
-
- &:active {
- background-color: transparentize($color, .76);
- &:focus {
- background-color: transparentize($fc, .68);
- }
+ @include draw_hc_inset();
}
- &:selected,
- &:checked {
- background-color: transparentize($color, .81);
- &:active { background-color: transparentize($color, .78);}
- &:hover { background-color: transparentize($color, .75);}
+ &:highlighted {
+ // brighter background color than other states
+ $bg: transparentize($fg, 0.8);
+ @include button(active, $tc:$fg, $c:$bg, $always_dark: $system);
}
&:drop {
- border-color: transparentize($selected_bg_color, .2);
background-color: transparentize($selected_bg_color, .8);
- }
-}
-
-// styling for elements within popovers that look like notifications
-@mixin card($flat: false) {
- @extend %card;
-
- @if $flat {
- @include button(undecorated, $card: false);
- &:hover {@include button(hover, $card: false);}
- &:active {@include button(active, $card: false);}
- } @else {
- @include button(normal, $card: true);
- &:hover {@include button(hover, $card: true);}
- &:active {@include button(active, $card: true);}
- }
- &:focus {@include button(focus, $card: true);}
- &:insensitive {
- @include button(insensitive, $card: true);
+ box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .2);
}
}
// styling for all menuitems in popovers
-@mixin menuitem($bg, $flat: true) {
+@mixin menuitem($bg, $style: flat) {
+
+ // extend common styles
+ @extend %menuitem;
// lighten the background color always
$bg: lighten($bg,5%);
- font-weight: normal;
- spacing: $base_padding;
- transition-duration: 100ms;
- padding: $base_padding * 1.5 $base_padding * 2;
-
- @if $flat {
+ @if $style == 'flat' {
@include button(undecorated);
} @else {
@include button(normal, $c:$bg);
&:checked {@include button(checked, $c:$bg);}
}
-//
// Panel menu/button drawing function
-//
-// $bg: background color, derived from $panel_fg_color
-// $fg: foreground color, also derived from $panel_fg_color
-//
-// $flat: if true, the button is filled instead of transparent
-// $highlighted_child: if true, applies some special overrides for to a
-// child element, see _panel.scss for details
-// $child_class: class name of the child element
-//
-
-@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $flat: true, $highlighted_child: false, $child_class:"") {
+@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: flat, $highlighted_child: false, $child_class:"") {
+ //
+ // $bg: background color, derived from $panel_fg_color
+ // $fg: foreground color, also derived from $panel_fg_color
+ //
+ // $flat: if true, the button is filled instead of transparent
+ // $highlighted_child: if true, applies some special overrides for to a
+ // child element, see _panel.scss for details
+ // $child_class: class name of the child element
+ //
+ // common styles
transition-duration: 150ms;
margin: 3px;
border: 1px solid transparent;
font-weight: bold;
background-color: transparent;
+
color: $fg;
- @if $flat {
+ @if $style == 'flat' {
box-shadow: none;
&:active, &:focus, &:checked {
} @else {
background-color: transparentize($bg, 0.2);
- @if $contrast == 'high' {
+ @if $contrast == 'high' {
border-color: $hc_inset_color;
}
// use box-shadow instead of border
@if $contrast == 'high' {
- box-shadow: inset 0 0 0 1px $hc_inset_color;
+ @include draw_hc_inset();
}
}
$borders_color: transparentize($fg_color, $border_opacity);
$outer_borders_color: $borders_color;
-// buttons in notifications
-$bubble_buttons_color: lighten($bg_color, 5%);
-
// osd colors
$osd_borders_color: transparentize($osd_fg_color, 0.8);
$osd_outer_borders_color: $osd_borders_color;
$active_bg_color: lighten($bg_color, 22%);
$active_fg_color: lighten($fg_color, 22%);
+// selection colors
+$selected_borders_color: lighten($selected_bg_color, 30%);
//
// High Contrast specific definitions
// items in the app grid and dash
.overview-tile {
- @include tile_button($system_fg_color);
+ @include tile_button($bg:$system_base_color);
// override the %tile style
border-radius: $base_border_radius*3;
// app folders
.app-folder {
- @include tile_button($system_fg_color, $flat: false);
+ @include tile_button($bg:$system_base_color, $raised: true);
}
// Running app indicator (also shown in dash)
width: 5px;
border-radius:5px;
background-color: $system_fg_color;
- margin-bottom: 2px;
@if $contrast == 'high' {
margin-bottom: 4px;
+ } @else {
+ margin-bottom: 2px;
}
}
border-radius: $modal_radius * 4;
background-color: $system_overlay_bg_color;
- box-shadow: inset 0 0 0 1px $system_borders_color;
- padding: 0 1px;
+ color: $system_fg_color;
@if $contrast == 'high' {
padding: 0 2px;
box-shadow: inset 0 0 0 2px $hc_inset_color;
+ } @else {
+ padding: 0 1px;
+ box-shadow: inset 0 0 0 1px $system_borders_color;
}
& .folder-name-container {
}
& .folder-name-entry {
+ @extend %system_entry;
width: 12em;
}
}
& .page-indicators {
margin-bottom: $base_padding * 4;
}
-}
-
+ & .overview-tile {
+ @include tile_button($bg:$system_overlay_bg_color);
+ }
+}
// Rename popup for app folders
.rename-folder-popup {
> StIcon { color: $system_fg_color;}
- @if $contrast == 'high' {
- @include button(normal, $system_fg_color, transparentize($system_bg_color, 0.5));
- }
-
- &:insensitive { @include button(undecorated, $system_fg_color, transparentize($system_bg_color, 0.5));}
- &:hover { @include button(hover, $system_fg_color, transparentize($system_bg_color, 0.5));}
- &:active { @include button(active, $system_fg_color, transparentize($system_bg_color, 0.5));}
+ @include button(normal, $tc:$system_fg_color, $c:$system_base_color, $style: flat);
+ &:hover { @include button(hover, $tc:$system_fg_color, $c:$system_base_color, $style: flat);}
+ &:active { @include button(active, $tc:$system_fg_color, $c:$system_base_color, $style: flat);}
}
@extend %button;
// uses scalable value since it's a text element
min-height: to_em(22px);
+
+ // default style
+ &.default {
+ @extend %default_button;
+ }
+ // flat style
+ &.flat {
+ @extend %flat_button;
+ }
}
.icon-button {
icon-size: $scalable_icon_size;
-st-icon-style: symbolic;
}
+
+ // default style
+ &.default {
+ @extend %default_button;
+ }
+
+ // flat style
+ &.flat {
+ @extend %flat_button;
+ }
}
/* today button (the date) */
.datemenu-today-button {
- @include card($flat: true);
+ @extend %card_flat;
padding: $base_padding * 1.5;
// weekday label
/* Calendar */
.calendar {
- @include card($flat: true);
+ @extend %card_flat;
margin-top: 0;
padding: 0;
// month label
.calendar-month-label {
@extend %heading;
- @extend .button, .flat;
+ @extend %flat_button;
color: $fg_color !important;
padding: 8px 0;
width: 10em;
.calendar-day {
@extend %numeric;
@extend %smaller;
- @extend .button, .flat;
+ @extend %flat_button;
border-radius: $forced_circular_radius;
height: 3em;
width: 3em;
}
&.calendar-today {
- @extend .default;
+ @extend %default_button;
border: none;
&.calendar-day-with-events {
background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg") !important; // always use light asset with .default style
.calendar-day-heading {
@extend %numeric;
@extend %smaller;
- @extend .button, .flat;
+ @extend %flat_button;
font-weight: bold;
text-align: center;
margin: $base_margin;
border-radius: $base_border_radius * 0.5;
background-color: transparentize($insensitive_fg_color, .8);
color: $insensitive_fg_color;
- border: 1px solid transparent;
@if $contrast == 'high' {
- border-color: $hc_inset_color;
+ @include draw_hc_inset();
}
}
}
/* Events */
.events-button {
- @include card;
+ @extend %card;
.events-box {
spacing: $base_padding;
/* World clocks */
.world-clocks-button {
- @include card;
+ @extend %card;
.world-clocks-grid {
spacing-rows: $base_padding;
/* Weather */
.weather-button {
- @include card;
+ @extend %card;
.weather-box {
spacing: $base_padding + $base_margin;
.dash-background {
background-color: $dash_background_color;
border-radius: $dash_border_radius;
- border: 2px solid transparent;
- padding: $dash_padding * 2 $dash_padding; // padding is uneven
+ padding-top: $dash_padding * 2;
+ padding-bottom: $dash_padding * 2;
+ padding-left: $dash_padding + 2px; // padding is uneven and needs hardcoded values
+ padding-right: $dash_padding + 2px;
@if $contrast == 'high' {
- border-color: $hc_inset_color;
+ @include draw_hc_inset($width: 2px);
}
}
height: $dash_placeholder_size;
}
- // app icons
+ .show-apps,
.overview-tile {
- // inherits styles from _app-grid.css
- }
-
- // button to show app grid
- .show-apps {
- @include tile_button($system_fg_color);
- }
-
- .show-apps, .overview-tile {
+ @include tile_button($bg:$dash_background_color);
margin: $base_margin * 0.5;
padding: $base_padding;
border-radius: $base_border_radius * 2;}
border-radius: $key_border_radius;
box-shadow: 0 1px 0 0 $shadow_color;
- @include keyboard_key(normal, $key_bg_color, $osd_fg_color);
+ @include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
- &:focus { @include keyboard_key(focus);}
- &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
- &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
- &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
+ &:focus { @include button(focus);}
+ &:hover { @include button(hover, $c:$key_bg_color, $tc:$osd_fg_color);}
+ &:active { @include button(active, $c:$key_bg_color, $tc:$osd_fg_color); }
+ &:checked { @include button(checked, $c:$key_bg_color, $tc:$osd_fg_color); }
&:grayed { //FIXMEy
background-color: darken($bg_color, 3%);
// non-character keys
&.default-key {
- @include keyboard_key(normal, $default_key_bg_color, $osd_fg_color);
- &:hover {@include keyboard_key(hover, $default_key_bg_color, $osd_fg_color);}
- &:active { @include keyboard_key(active, $default_key_bg_color, $osd_fg_color);}
- &:checked { @include keyboard_key(checked, $default_key_bg_color, $osd_fg_color);}
+ @include button(normal, $c:$default_key_bg_color, $tc:$osd_fg_color);
+ &:hover { @include button(hover, $c:$default_key_bg_color, $tc:$osd_fg_color);}
+ &:active { @include button(active, $c:$default_key_bg_color, $tc:$osd_fg_color);}
+ &:checked { @include button(checked, $c:$default_key_bg_color, $tc:$osd_fg_color);}
border-radius: $key_border_radius;
// keys that may be latched: ctrl/alt/shift
// enter key is suggested-action
&.enter-key {
- @include keyboard_key(normal, $selected_bg_color, $selected_fg_color);
- &:hover { @include keyboard_key(hover, $selected_bg_color, $selected_fg_color);}
- &:active {@include keyboard_key(active, $selected_bg_color, $selected_fg_color);}
- &:checked {@include keyboard_key(checked, $selected_bg_color, $selected_fg_color);}
+ @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
+ &:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color);}
+ &:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color);}
+ &:checked { @include button(checked, $c:$selected_bg_color, $tc:$selected_fg_color);}
border-radius: $key_border_radius;
color: $osd_fg_color;
}
padding: $base_padding;
.keyboard-key {
- @include keyboard_key(normal, $key_bg_color, $osd_fg_color);
+ @include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
- &:focus { @include keyboard_key(focus);}
- &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
- &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
- &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
+ &:focus { @include button(focus);}
+ &:hover { @include button(hover, $c:$key_bg_color, $tc:$osd_fg_color);}
+ &:active { @include button(active, $c:$key_bg_color, $tc:$osd_fg_color); }
+ &:checked { @include button(checked, $c:$key_bg_color, $tc:$osd_fg_color); }
border-radius:$key_border_radius;
}
border-radius: 4px;
padding: 0px $base_padding * 3;
- @include keyboard_key(undecorated, $key_bg_color, $osd_fg_color);
+ @include button(undecorated, $c:$key_bg_color, $tc:$osd_fg_color);
- &:focus { @include keyboard_key(focus);}
- &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
- &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
- &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
+ &:focus { @include button(focus);}
+ &:hover { @include button(hover, $c:$key_bg_color, $tc:$osd_fg_color);}
+ &:active { @include button(active, $c:$key_bg_color, $tc:$osd_fg_color); }
+ &:checked { @include button(checked, $c:$key_bg_color, $tc:$osd_fg_color); }
}
}
// %system_entry style override to have neutral focus color with wallpaper background
.login-dialog-prompt-entry {
- &:focus { @include entry(focus, $c:$system_fg_color, $fc:transparentize($system_fg_color, 0.5));}
+ &:focus { @include entry(focus, $c:$system_fg_color);}
}
}
}
.lg-extension {
- @include card;
+ @extend %card;
}
.lg-extension-name {
// message bubbles
.message {
- @include card;
+ @extend %card;
padding: 0 !important;
// icon container
box-shadow:inset 0 0 0 1px transparentize($osd_fg_color, 0.9);
@if $contrast == 'high' {
- box-shadow:inset 0 0 0 1px $hc_inset_color;
+ @include draw_hc_inset();
}
}
}
margin: $base_margin;
@if $contrast == 'high' {
- border: 1px solid $hc_inset_color;
+ @include draw_hc_inset();
}
.notification-actions {
}
&.screen-recording-indicator {
- @include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $flat: false);
+ @include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $style: null);
}
&.screen-sharing-indicator {
- @include panel_button($privacy_indicator_color, $fg:$_base_color_light, $flat: false);
+ @include panel_button($privacy_indicator_color, $fg:$_base_color_light, $style: null);
}
// clock
// unfortunate duplication to keep indicator style in these states
.panel-button {
&.screen-recording-indicator {
- @include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $flat: false);
+ @include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $style: null);
}
&.screen-sharing-indicator {
- @include panel_button($privacy_indicator_color, $fg:$_base_color_light, $flat: false);
+ @include panel_button($privacy_indicator_color, $fg:$_base_color_light, $style: null);
}
}
}
// submenu specific styles
.popup-menu-item {
border-radius: 0;
- @include menuitem($bg:$submenu_bg_color, $flat:false);
+ @include menuitem($bg:$submenu_bg_color);
border-top-width:0;
&:last-child {
}
.quick-toggle {
- &:checked { @include button(default, $c:$selected_bg_color); }
+ background-color: none;
+ &:checked { @extend %default_button;}
& > StBoxLayout { spacing: $base_padding * 1.5; }
border-color: transparentize($fg_color, .75);
&:checked {
- @include button(default, $c:$selected_bg_color);
+ @extend %default_button;
border-color: $selected_borders_color;
}
}
.quick-toggle-menu {
- @include card;
+ @extend %card;
&:insensitive {
// override insensitive style on submenu
.keyboard-brightness-level {
spacing: $base_padding;
- .button:checked { @include button(default, $c:$selected_bg_color); }
+ .button:checked { @extend %default_button; }
}
// background apps
spacing: $base_padding * 0.5;
@if $contrast == 'high' {
- box-shadow: inset 0 0 0 1px $hc_inset_color;
+ @include draw_hc_inset();
}
}
border-radius: $forced_circular_radius;
@if $contrast == 'high' {
- box-shadow: inset 0 0 0 1px $hc_inset_color;
+ @include draw_hc_inset();
}
> StIcon { icon-size: $base_icon_size;}
}
%search_section_content_item {
- @include tile_button($system_fg_color);
+ @include tile_button($bg:$system_overlay_bg_color);
border-radius: $base_border_radius * 1.65;
}
// each item in the list
.item-box {
- @include tile_button($osd_fg_color);
+ @include tile_button($fg:$osd_fg_color, $bg:$osd_bg_color);
// override %tile style so mouse doesn't steal focus
&:hover {background: none;}
}
projects / gnome-shell.git / commitdiff